<template>
  <div class="lingquan">
    <div class="lingquan-item" v-for="(item, index) in 3" :key="index">
      <img
        src="https://img12.360buyimg.com/common/s100x100_jfs/t1/86797/34/15007/133042/5e6b1cadEa1c9d655/0e0a25d2285baca3.jpg!cc_50x50.webp"
        alt
      />
      <div class="price">
        ￥
        <strong>20</strong>
      </div>
      <div class="info">满199元可用</div>
      <p>仅可购买部分商品XX</p>
    </div>
  </div>
</template>

<style lang="scss">
.lingquan {
  height: 250px;
  padding-left: 30px;
  padding-top: 7px;
  background-image: url("https://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/assets/img/b5576e69a83147bda19e45d0cf428e41.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  img {
    float: left;
    width: 60px;
    height: 60px;
    margin-right: 10px;
    border-radius: 50%;
  }
  &-item {
    margin-bottom: 8px;
    overflow: hidden;
  }
  .price {
    color: #e33333;
    strong {
      font-size: 20px;
      font-family: impact, sans-serif;
    }
  }
}
</style>